<template>
	<div class="layout-flex" v-loading="state.loading">
		<ApproveLayout
			:params="state.approveParams"
			:title="'入库单-' + inboundDetailRef?.infoData?.inboundOrderCode"
			:type="
				inboundDetailRef?.infoData?.statusCode === 2
					? '审批中'
					: inboundDetailRef?.infoData?.statusCode === 3
					? '已驳回'
					: state.num.indexOf(inboundDetailRef?.infoData?.statusCode) !== -1
					? '已通过'
					: false
			"
			@dataChange="changeData"
		>
			<template #detail>
				<detailInfo type="approval" ref="inboundDetailRef" />
			</template>
		</ApproveLayout>
	</div>
</template>
<script setup lang="tsx" name="approvalProgress">
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
const route = useRoute();
import mittBus from '/@/utils/mitt';
const useRoutes = useRoute();

import { getLatestByBusId } from './api.ts';
const detailInfo = defineAsyncComponent(() => import('./detailInfo.vue'));
const state = reactive({
	busId: '',
	approveParams: {
		processInstanceId: '',
		busId: '',
	},
	loading: false,
	num: [4, 5, 6],
});
const inboundDetailRef = ref();
onMounted(() => {
	state.busId = route.query.id;
	if (!state.busId) {
		cancelEdit();
	}
	toGetLatestByBusId();
});

const cancelEdit = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...useRoutes }));
};
// 获取审批进度
const toGetLatestByBusId = async () => {
	state.loading = true;
	try {
		const { data } = await getLatestByBusId({ busId: state.busId });
		state.approveParams = data;
	} catch (res) {
		ElMessage({
			message: res.msg,
			type: 'error',
		});
		cancelEdit();
	}
};
const changeData = (data) => {
	if (data) {
		state.loading = false;
	}
};
</script>
<style lang="scss" scoped>
.info-tab-title {
	margin-left: 20px;
	position: relative;
	height: 24px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
	color: #0b1019;
	padding-left: 10px;
	margin-bottom: 20px;
	display: flex;
	&:before {
		content: ' ';
		display: inline-block;
		position: absolute;
		top: 5px;
		left: 0;
		height: 14px;
		width: 2px;
		background: #005bf5;
	}
}
</style>
 